<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<el-row style="width: 100%;padding-top: 5px;">
			<el-col :span="11">
				<div>
					<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
					<el-date-picker :editable="false" v-model="startTime" :clearable="false" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
					<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
					<el-date-picker :editable="false" v-model="endTime" :clearable="false" size="small" type="date" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
				</div>
			</el-col>
			<el-col :span="13">
				<div class="block" style="text-align:right;float: right">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">>
					</el-pagination>
				</div>
			</el-col>
		</el-row>
		<el-table border :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="index" align="center" width="50px"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="用户名" align="center" prop="uid"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="name"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="登录时间" align="center" prop="logintime"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="描述" align="center" prop="desc"></el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { HttpServer } from '../../../../../assets/js/common.js'
	import headerOpreate from '../../../../../components/headerOpreate'
	let id = 1000;
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				loading: false,
				value: 0,
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				}]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			changeStartTime() {
				this.startTime = this.startTime.format('yyyy-MM-dd') + ' 00:00:00';
				this.getDatas();
			},
			changeEndTime() {
				this.endTime = this.endTime.format('yyyy-MM-dd') + ' 23:59:59';
				this.getDatas();
			},
			//去掉时间中的T
			formateData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].BorrowTime.indexOf("T");
					var index2 = array[i].RealReturnTime.indexOf("T");
					array[i].BorrowTime = array[i].BorrowTime.substring(0, index1) + " " + array[i].BorrowTime.substring(index1 + 1, index1 + 9);
					array[i].RealReturnTime = array[i].RealReturnTime.substring(0, index2) + " " + array[i].RealReturnTime.substring(index2 + 1, index2 + 9);
				}
			},
			//刷新
			reloadDatas() {
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/TC1000/TC1000UseDetail', {
					begin: this.startTime,
					end: this.endTime,
					pagesize: this.pageSize,
					index: this.currentPage,
					devicesn: this.templateObj.sn
				}, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//数据详情
			getDatas() {
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/TC1000/TC1000UseDetail', {
					begin: this.startTime,
					end: this.endTime,
					pagesize: this.pageSize,
					index: this.currentPage,
					devicesn: this.templateObj.sn
				}, function(response) {}, function(response) {
					// console.log(response)
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
		},
		created() {
			this.startTime = this.templateObj.startTime;
			this.endTime = this.templateObj.endTime;
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>